import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts';
import { Button, Modal } from 'antd';
import { SearchOutlined } from '@ant-design/icons';

// 定义 ECharts 配置项类型  
type EChartsOption = echarts.EChartsOption;

// 定义日历图表数据类型  
export interface CalendarChartData {
    date: string; // 日期格式：'YYYY-MM-DD'  
    warning: number; // 告警  
    unknown: number; // 未知  
    health: number; // 健康  
    total: number; // 总计  
}

// 定义 CalendarChart 组件的 props 类型  
interface CalendarChartProps {
    cellSize?: [number, number]; // 单元格大小  
    dateRange?: string[]; // 日期范围  
    chartTitle?: string; // 图表标题  
    data?: CalendarChartData[]; // 数据  
}

// CalendarChart 组件定义  
const CalendarChart: React.FC<CalendarChartProps> = ({
    cellSize = [40, 40], // 默认单元格大小  
    dateRange = [], // 默认日期范围  
    chartTitle = '', // 默认图表标题  
    data = [], // 默认数据为空数组  
}) => {
    const [visible, setVisible] = useState(false); // 控制模态框的可见性  
    const chartRef = useRef<any>(null); // 图表实例的引用  

    // 确保 data 是一个有效的数组，如果是 null 或 undefined 就默认一个空数组  
    const validData = useMemo(() => Array.isArray(data) ? data : [], [data]);

    // 准备散点图数据  
    const scatterData = validData.map(item => [
        echarts.time.parse(item.date), // 解析日期  
        item.total, // 总值，用于鼠标悬停时显示  
    ]);

    const pieRadius = 18; // 饼图半径  
    const pieColors = ['#ff4d4f', '#fffbe6', '#95de64']; // 红色、黄色、绿色  

    // 准备饼图系列数据  
    const pieSeries = validData.map((item, index) => ({
        type: 'pie', // 饼图类型  
        id: `pie-${index}`, // 唯一 ID  
        center: [echarts.time.parse(item.date), 0], // 将饼图中心放在对应日期上  
        radius: pieRadius, // 饼图半径  
        coordinateSystem: 'calendar', // 使用日历坐标系  
        itemStyle: {
            color: (params: any) => pieColors[params.dataIndex], // 设置颜色  
        },
        label: {
            formatter: '{c}', // 标签格式化  
            position: 'inside', // 标签位置在内部  
        },
        data: [
            { name: '紧急', value: item.warning }, // 告警  
            { name: '未知', value: item.unknown }, // 未知  
            { name: '健康', value: item.health }, // 健康  
        ],
    })) as echarts.PieSeriesOption[];

    // 定义 ECharts 配置项函数  
    const getChartOption = useCallback((): EChartsOption => {
        return {
            tooltip: {}, // 提示框  
            legend: {
                data: ['紧急', '未知', '健康'], // 图例数据  
                bottom: 9, // 图例位置  
                show: validData.length > 0, // 仅在有数据时显示图例  
            },
            calendar: {
                top: 'middle', // 日历位置  
                left: 'center',
                orient: 'vertical', // 垂直方向排列  
                cellSize: cellSize, // 单元格大小  
                yearLabel: {
                    show: false, // 不显示年份标签  
                },
                dayLabel: {
                    margin: 5, // 日标签的边距  
                    firstDay: 1, // 一周的第一天  
                    nameMap: ['日', '一', '二', '三', '四', '五', '六'], // 星期名称  
                },
                monthLabel: {
                    show: false, // 不显示月份标签  
                },
                range: dateRange, // 日期范围  
            },
            series: [
                {
                    id: 'label', // 标签系列 ID  
                    type: 'scatter', // 散点图类型  
                    coordinateSystem: 'calendar', // 使用日历坐标系  
                    symbolSize: 0, // 符号大小  
                    label: {
                        show: true, // 显示标签  
                        formatter: (params: any) =>
                            echarts.time.format(params.value[0], '{dd}', false), // 格式化日期  
                        offset: [-cellSize[0] / 2 + 10, -cellSize[1] / 2 + 10], // 标签偏移  
                        fontSize: 12, // 标签字体大小  
                    },
                    data: scatterData, // 仅在有数据时提供散点数据  
                },
                ...pieSeries, // 添加饼图系列  
            ] as echarts.SeriesOption[], // 确保系列选项类型正确  
        };
    }, [cellSize, dateRange, validData, scatterData, pieSeries]);

    // 显示模态框  
    const showModal = () => {
        setVisible(true);
    };

    // 关闭模态框  
    const handleCancel = () => {
        setVisible(false);
    };

    // 在组件加载或更新时清空图表并重新设置数据  
    useEffect(() => {
        if (chartRef.current) {
            const chartInstance = chartRef.current.getEchartsInstance();
            chartInstance.clear(); // 清空图表  
            chartInstance.setOption(getChartOption()); // 设置新的图表数据  
        }
    }, [getChartOption]);

    return (
        <div style={{ width: '100%', paddingLeft: '10px' }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
                <Button size="small" type="text" onClick={showModal} shape="circle" icon={<SearchOutlined />} />
                <h3 style={{ margin: '0 10px' }}>{chartTitle}</h3>
            </div>
            <ReactECharts ref={chartRef} option={getChartOption()} style={{ width: '100%' }} />

            <Modal
                forceRender
                title={chartTitle}
                open={visible}
                onCancel={handleCancel}
                footer={null}
                width={'70%'}
            >
                <ReactECharts option={getChartOption()} style={{ width: '100%' }} />
            </Modal>
        </div>
    );
};

export default CalendarChart;
